<template>
  <div>
    <p id="p1" @click="userobj.age++">{{userobj.name}}--{{userobj.age}}</p>
  </div>
</template>
<script setup>
import {watchEffect,watch,ref,reactive,watchPostEffect} from 'vue'
// watchEffect 侦听器
 
//  watch  和watchEffect 的区别:
// 01: watch 监听默认初始化不监听  watcheffect默认初始化监听
// 02: watch 必须有明确的监听的数据源,  watcheffect 监听在回调中访问的依赖值


const userobj = reactive({name:'王蓝浠',age:40})
// 默认深度监听
// watch(userobj,(newvalue)=>{
//   // console.log(newvalue);
//     // 获取最新的dom 01: 使用nextTick 02: 使用定时器  03: 使用flush:'post'
//    console.log(document.querySelector('#p1').innerHTML);
// },{
//   flush:'post'
// })

// watchEffect(()=>{
//   // console.log(userobj);
//   console.log(userobj.age);
//   // console.log(userobj.name);
//    console.log(document.querySelector('#p1').innerHTML);
// },{
//   flush: 'post'
// })

watchPostEffect(()=>{
   console.log(userobj.age);
  console.log(document.querySelector('#p1').innerHTML);
})
</script>
<style scoped>

</style>